<template>
  <div class="warp">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-show="!isEdit">
      <el-tab-pane label="备件" name="first"> </el-tab-pane>
      <el-tab-pane label="物料" name="second"></el-tab-pane>
      <el-tab-pane label="油料" name="third"></el-tab-pane>
      <div v-show="applyType == 0">
        <template>
          <div>
            <el-row :gutter="24">
              <el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="80px">
                <!-- 申请单号 -->
                <el-col :span="6">
                  <el-form-item label="申请单号" prop="field102">
                    <el-input v-model="formData.field102" placeholder="请输入申请单号" clearable style="width:100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 申请供船地点 -->
                <el-col :span="6">
                  <el-form-item label="申请地点" prop="field102">
                    <el-input v-model="formData.field102" placeholder="请输入申请供船地点" clearable style="width:100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 关键字 -->
                <el-col :span="6">
                  <el-form-item label="关键字" prop="field102">
                    <el-input v-model="formData.field102" placeholder="请输入关键字" clearable style="width:100%">
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 申请船舶 -->
                <el-col :span="6">
                  <el-form-item prop="field101" label="申请船舶">
                    <el-select v-model="formData.field101" placeholder="请选择申请船舶" clearable style="width:100%">
                      <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 申请部门 -->
                <el-col :span="6">
                  <el-form-item prop="field101" label="申请部门">
                    <el-select v-model="formData.field101" placeholder="请选择申请部门" clearable style="width:100%">
                      <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 采购方式 -->
                <el-col :span="6">
                  <el-form-item prop="field101" label="采购方式">
                    <el-select v-model="formData.field101" placeholder="请选择采购方式" clearable style="width:100%">
                      <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 紧急程度 -->
                <el-col :span="6">
                  <el-form-item prop="field101" label="紧急程度">
                    <el-select v-model="formData.field101" placeholder="请选择紧急程度" clearable style="width:100%">
                      <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 申请状态 -->
                <el-col :span="6">
                  <el-form-item prop="field101" label="申请状态">
                    <el-select v-model="formData.field101" placeholder="请选择申请状态" clearable style="width:100%">
                      <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-form>
            </el-row>

            <el-button size="medium " icon="el-icon-search" type="primary" @click="submitForm"
              style="margin-left: 15px;">查询</el-button>
            <el-button size="medium " icon="el-icon-delete" @click="resetForm">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" size="medium " @click="centerDialogVisible = true">
              新增</el-button>
            <el-dialog title="新增采购申请" :visible.sync="centerDialogVisible" width="800px" center>
              <div>
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
                  <!-- 申请船舶 -->
                  <el-row :gutter="24" class="layout-items-center">
                    <el-col :span="12">
                      <el-form-item prop="field101" label="申请名称" >
                        <el-input v-model="formData.name"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="field101" label="申请船舶" >
                        <el-select v-model="formData.field101" placeholder="请选择申请船舶" clearable>
                          <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <!-- 申请部门 -->
                    <el-col :span="12">
                      <el-form-item prop="field101" label="申请部门" >
                        <el-select v-model="formData.field101" placeholder="请选择申请部门" clearable>
                          <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="field101" label="供船地点" >
                        <el-input v-model="formData.name"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="field101" label="供船时间" >
                        <el-date-picker style="width: 100%;" v-model="formData.value1" type="datetime"
                          placeholder="选择日期时间">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <!-- 物品类型 -->
                    <el-col :span="12">
                      <el-form-item prop="field101" label="物品类型" >
                        <el-select v-model="formData.field101" placeholder="请选择物品类型" clearable>
                          <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <!-- 物品类型 -->

                    <el-col :span="12">
                      <el-form-item prop="field101" label="采购数量" >
                        <el-input-number v-model="formData.num" :min="1" :max="999" label="采购数量"
                          style="width: 100%;text-align: center;padding: 0;"></el-input-number>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item prop="field101" label="紧急程度">
                        <el-radio-group v-model="formData.radio3" size="small">
                          <el-radio label="1" border>正常</el-radio>
                          <el-radio label="2" border>紧急</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="申请理由">
                        <el-input type="textarea" v-model="formData.desc"></el-input>
                      </el-form-item>
                    </el-col>


                  </el-row>
                </el-form>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
              </div>
            </el-dialog>
            <el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="700" border>
              <el-table-column fixed prop="date" label="申请单号" width="150" align="center">
              </el-table-column>
              <el-table-column prop="name" label="申请单名称" width="120" align="center">
              </el-table-column>
              <el-table-column prop="province" label="申请船舶" width="120" align="center">
              </el-table-column>
              <el-table-column prop="city" label="申请部门" width="120" align="center">
              </el-table-column>
              <el-table-column prop="address" label="所属设备" width="300" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="紧急程度" width="120" align="center">
                <template slot-scope="scope">
                  <el-tag>正常</el-tag>
                </template>
              </el-table-column>

              <el-table-column prop="zip" label="供船日期" width="120" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="供船地点" width="120" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="申购理由" width="120" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="申请人" width="120" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="申请日期" width="120" align="center">
              </el-table-column>
              <el-table-column prop="zip" label="申请状态" width="120" align="center">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="medium">编辑</el-button>
                  <el-button type="text" size="medium" @click="dialogInfo = true">采购计划</el-button>
                  <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="medium"
                    style="color: red">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 采购单 -->
            <el-drawer title="采购计划" size='90vw' :visible.sync="dialogInfo">
              <orderPlan></orderPlan>
            </el-drawer>
            <!-- 分页 -->
            <div class="block layout-justify-end">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="10"
                :page-sizes="[100, 200, 300, 400]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </div>
        </template>
      </div>
      <div v-show="applyType == 1">
        <div style="margin-bottom: 30px">
          <el-button type="primary" plain>导出</el-button>
          <el-button type="primary" plain @click="applyType = 0">返回</el-button>
        </div>
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium " label-width="10px">
            <!-- 申请单名称 -->
            <el-col :span="5">
              <el-form-item label-width="100px" label="申请单号/名称" prop="field102">
                <el-input v-model="formData.field102" placeholder="请输入申请单号/名称" clearable style="width:100%">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- 关键字 -->
            <el-col :span="5">
              <el-form-item label-width="80px" label="关键字" prop="field102">
                <el-input v-model="formData.field102" placeholder="请输入关键字" clearable style="width:100%">
                </el-input>
              </el-form-item>
            </el-col>

            <!-- 申请船舶 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="70px" label="申请船舶">
                <el-select v-model="formData.field101" placeholder="请选择申请船舶" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 申请部门 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="85px" label="申请部门">
                <el-select v-model="formData.field101" placeholder="请选择申请部门" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 采购方式 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="70px" label="采购方式">
                <el-select v-model="formData.field101" placeholder="请选择采购方式" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 计划属性 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="75px" label="计划属性">
                <el-select v-model="formData.field101" placeholder="请选择计划属性" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 排序规则 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="75px" label="排序规则">
                <el-select v-model="formData.field101" placeholder="请选择排序规则" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 初审状态 -->
            <el-col :span="5">
              <el-form-item prop="field101" label-width="70px" label="初审状态">
                <el-select v-model="formData.field101" placeholder="请选择初审状态" clearable style="width:100%">
                  <el-option v-for="(item, index) in field101Options" :key="index" :label="item.label"
                    :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 申请日期 -->
            <el-col :span="6">
              <el-form-item label-width="70px" label="申请日期" prop="field103">
                <el-date-picker type="daterange" v-model="formData.field103" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" style="width:100%" start-placeholder="开始日期" end-placeholder="结束日期"
                  range-separator="至" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row :gutter="15" class="layout-items-center">
          <el-col :span="3">
            <el-button size="medium " type="primary" @click="submitForm">搜索</el-button>
            <el-button size="medium " @click="resetForm">重置</el-button>
          </el-col>

          <!-- 申请船舶 -->
          <el-col :span="4">
            <el-checkbox v-model="checked">仅显示关键备件</el-checkbox>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%; margin: 20px 0" max-height="700" border>
          <el-table-column fixed prop="date" label="申请单号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="申请单名称" width="120">
          </el-table-column>
          <el-table-column prop="province" label="申请船舶" width="120">
          </el-table-column>
          <el-table-column prop="city" label="申请部门" width="120">
          </el-table-column>
          <el-table-column prop="address" label="所属设备" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="采购方式" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="紧急程度" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申请供船日期" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申请供船地点" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申购理由" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申请人" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申请日期" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="采购项数" width="120">
          </el-table-column>
          <el-table-column prop="zip" label="申请状态" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="medium"> 编辑 </el-button>
              <el-button type="text" size="medium"> 复制 </el-button>
              <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="medium"
                style="color: red">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-tabs>
    <div v-show="isEdit">
      <div class="edit-title layout-items-center">
        <img src="../../../assets/images/返回.png" alt="" />采购申请编辑
      </div>
    </div>
  </div>
</template>

<script>
  import orderPlan from './components/orderPlan.vue';
  export default {
    components: {
      orderPlan,
    },
    data() {
      return {
        checkForm: {
          status: '1'
        },
        dialogInfo: false,
        activeName: "first",
        centerDialogVisible: false,
        drawer: false,
        isEdit: false,
        formData: {
          field101: undefined,
          field102: undefined,
          field103: undefined,
          field105: undefined,
          field106: [1],
          radio3: '1',
          num: 1
        },
        rules: {
          field101: [
            {
              message: "请填写必填项",
              trigger: "change",
            },
          ],
          field102: [{
            message: "搜索关键字",
            trigger: "blur",
          }, ],
          field106: [],
        },
        field101Options: [{
            label: "选项一",
            value: 1,
          },
          {
            label: "选项二",
            value: 2,
          },
        ],
        field106Options: [{
          label: "隐藏其他人草稿单",
          value: 1,
        }, ],
        checked: false,
        tableData: [{
            date: "PA-P25022103",
            name: " 备件申请单",
            province: "华福油5",
            city: "轮机部",
            address: "燃油供油单元",
            zip: "岸基询价",
          },
          {
            date: "2025-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2025-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2025-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2025-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2025-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2025-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
        countLimit: [{
            date: "备件",
            name: 0,
            province: 0,
            city: 0,
            address: 0,
          },
          {
            date: "物料",
            name: "",
            province: "",
            city: "",
            address: "",
          },
          {
            date: "油料",
            name: "",
            province: "",
            city: "",
            address: "",
          },
        ],
        name: 0,
        applyType: 0,
      };
    },
    created() {},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      submitForm() {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
        });
      },
      resetForm() {
        this.$refs["elForm"].resetFields();
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      edit() {
        this.isEdit = true;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .warp {
    margin: 15px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    height: calc(100vh - 120px);
    overflow: auto;
  }

  ::v-deep .el-tabs__item {
    width: 100px;
    padding: 0;
    text-align: center;
  }

  ::v-deep .el-form-item__label {
    // font-size: 12px;
    font-weight: 500;
  }

  ::v-deep .el-input__inner {
    padding-right: 10px;
  }

  ::v-deep .el-checkbox__label {
    // font-size: 12px;
    font-weight: bold;
  }

  ::v-deep .el-checkbox__inner {
    width: 20px;
    height: 20px;
    border: 1px solid black;

    &::after {
      position: absolute;
      top: 5%; // 垂直居中
      left: 27%; // 水平居中
      border: 2px solid #fff; // 打勾的颜色
      border-left: 0; // 去掉左边框
      border-top: 0; // 去掉上边框
      width: 6px; // 打勾的宽度
      height: 10px; // 打勾的高度
    }
  }

  ::v-deep .el-dialog {
    width: 25%;
  }

  ::v-deep .el-drawer__header {
    span {
      text-align: center;
      font-size: 24px;
    }
  }

  .count-input {
    width: 100%;
    padding: 5px;
    border: 1px solid rgb(206, 206, 206);
    box-sizing: border-box;
    border-radius: 7px;
    outline: none;
  }

  .count-tips {
    color: rgb(255, 102, 0);
    padding: 50px;
    font-weight: bold;
    line-height: 30px;
  }

  .edit-title {
    padding: 20px 20px 0;

    img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }

  .itemWidth {
    width: 100%;
    display: flex;
    align-items: center;

    .acNone {}

    ::v-deep .el-form-item__label {
      width: 100px;
      line-height: normal;
    }

    ::v-deep .el-form-item__content {
      margin-left: 10px !important;
      width: calc(100% - 110px) !important;
    }
  }
</style>
